<template>
	<!-- 文章组 -->
	<view class="diy-article">
		<view class="article-item" :class="['show-type__'+item.show_type]"  v-for="item in dataList" :key="item.article_id" @tap="menuClick" :data-id="item.article_id">
			<!-- 小图模式 -->
			<block v-if="item.show_type == 10">
				<view class="article-item__left flex-box">
					<view class="article-item__title twolist-hidden">
						<text class="f-30 col-3">{{item.article_title}}</text>
					</view>
					<view class="article-item__footer m-top10">
						<text class="article-views f-24 col-8">{{item.show_views}}次浏览</text>
					</view>
				</view>
				<view class="article-item__image">
					<image mode="widthFix" :src="item.image.file_path"></image>
				</view>
			</block>
			<!-- 大图模式 -->
			<block v-if="item.show_type == 20">
				<view class="article-item__title">
					<text class="f-30 col-3">{{item.article_title}}</text>
				</view>
				<view class="article-item__image m-top20">
					<image mode="widthFix" :src="item.image.file_path"></image>
				</view>
				<view class="article-item__footer m-top10">
					<text class="article-views f-24 col-8">{{item.show_views}}次浏览</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			// paddingTop() {
			// 	return uni.upx2px(this.itemStyle.paddingTop * 2) + 'px';
			// }
		},
		props: {
			params: {},
			dataList: {}
		},
		methods: {
			//跳转
			menuClick(e) {
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					//只能跳转到程序内页面
					url: '/pages/article/detail/detail?article_id=' + id
				});
			},
			
		}
	}
</script>

<style>
/* common.wxss */
@import url("../../utils/common.scss");

	/* 文章组 */

	.diy-article {
		background: #f7f7f7;
	}

	.diy-article .article-item {
		margin-bottom: 20upx;
		padding: 30upx;
		background: #fff;
	}

	.diy-article .article-item:last-child {
		margin-bottom: 0;
	}

	.diy-article .article-item .article-item__image image {
		display: block;
	}

	/* 小图模式 */

	.show-type__10 {
		display: flex;
	}

	.show-type__10 .article-item__left {
		padding-right: 20upx;
	}

	.show-type__10 .article-item__title {
		min-height: 72upx;
	}

	.show-type__10 .article-item__image image {
		width: 240upx;
	}

	/* 大图模式 */

	.show-type__20 .article-item__image image {
		width: 100%;
	}
</style>
